<template>
  <div id="mytest">
    <!-- 我的考试 -->
    <div class="content-body">
      <!-- 搜索框 -->
      <div class="search">
        <h3 style="width: 10%; padding-left: 10px">参加过的考试</h3>
        <el-row
          class="demo-autocomplete"
          style="width: 60%; display: flex; justify-content: space-between"
        >
          <!-- 输入框 -->
          <!-- 时期选择器 -->
          <div class="date" style="width: 350px">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy-MM-dd"
              style="width: 250px; margin-right: 5px"
              value-format="yyyy-MM-dd"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button
              @click="getmyDate"
              type="primary"
              size="small"
              align="center"
              >查询</el-button
            >
          </div>
          <!-- 所用时长 -->
          <div class="time" style="width: 300px">
            <el-time-picker
              is-range
              v-model="value2"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              style="width: 200px; margin-right: 5px"
              range-separator="——"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
            <el-button
              @click="getmyTime"
              type="primary"
              size="small"
              align="center"
              >查询</el-button
            >
          </div>
          <!-- 输入名称框 -->
          <div class="input" style="width: 300px">
            <el-col :span="24">
              <el-autocomplete
                class="inline-input"
                v-model="value3"
                style="width: 200px; margin-right: 5px"
                :fetch-suggestions="querySearch"
                placeholder="请输入考试名称"
                :trigger-on-focus="true"
                @select="handleSelect"
              ></el-autocomplete>
              <el-button
                @click="getmyTestName"
                type="primary"
                size="small"
                align="center"
                >查询</el-button
              >
            </el-col>
          </div>
        </el-row>
      </div>
      <hr />
      <!-- 参与过的考试表格 -->
      <div class="table-content">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          border
          style="width: 100%; font-size: 16px"
        >
          <el-table-column fixed align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="examName" label="考试名称">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="创建人">
          </el-table-column>
          <el-table-column
            align="center"
            prop="examJoinDate"
            label="参加考试的时间"
          >
          </el-table-column>
          <el-table-column align="center" prop="examTimeCost" label="所用时长">
          </el-table-column>
          <el-table-column align="center" prop="examJoinScore" label="分数">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="primary"
                size="small"
                align="center"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页处理 -->
      <div class="content-footer">
        <el-pagination
          background
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :current-page="currentPage"
          layout="total,sizes, prev, pager, next,jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="upChange"
          @next-click="nextChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页数据
      pageSize: 5, // 一个的数据条数
      currentPage: 1, // 当前页从哪页开始
      total: 100, // 设置总数
      // 参加考试日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      // 考试所用时长范围
      value2: [new Date(2022, 10, 25, 0, 40), new Date(2022, 10, 25, 9, 40)],
      // 用户输入框绑定数据
      value3: "",
      // 表格数据
      tableData: [
        {
          id: "",
          examName: "",
          userName: "",
          examJoinDate: "",
          examTimeCost: "",
          examJoinScore: "",
        },
      ],
    };
  },
  methods: {
    // 点击详情跳转
    handleClick(row) {
      console.log(row);
      this.$router.push({ path: "/student/testdetail" });
    },
    // 分页处理
    //改变每页显示的数量
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    //更改页码
    handleCurrentChange(val) {
      console.log(`当前页${val}条`);
      this.currentPage = val;
    },
    //上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1; //动态改变
    },
    //下一页
    nextChange(val) {
      this.currentPage += 1; //动态改变
    },
    // 范围查询
    getmyDate() {
      console.log(this.value1);
    },
    getmyTime() {
      console.log(this.value2);
    },
    getmyTestName() {
      console.log(this.value3);
    },
    // 模糊查询
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "java", host: "Nancy" },
        { value: "web", host: "Nancy" },
        { value: "Dom", host: "Nancy" },
        { value: "Bom", host: "Nancy" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    // console.log(this.$api.studentInfo);
    this.$api.studentInfo.getExamList().then((res) => {
      console.log(res.data);
      // this.from = res.data;
      // console.log(from);
      if (res.data.code == 200) {
        // 表格数据赋值
        console.log(res);
        this.tableData = res.data.data;
        console.log(res.data.data);
      } else {
        console.log("111");
      }
      console.log(res.data.data[0].examJoinDate);
      if (res.data.data[0].examJoinDate) {
        var formatDate = res.data.data[0].examJoinDate
          // .toLocaleDateString();
          // .split("/")
          // .join("-");
        // empHirDates = this.addEmployeeName.empHirDateList[1]
        //   .toLocaleDateString()
        //   .split("/")
        //   .join("-");
        console.log(formatDate);
        // console.log(empHirDates);
        // this.addEmployeeName.empHirDate = empHirDate;
        // this.addEmployeeName.empHirDates = empHirDates;
        // console.log(this.addEmployeeName);
      }
    });
  },
};
</script>

<style lang="less" scoped>
#mytest {
  background-color: #f0f2f5;
  width: 100%;
}
.content-body {
  margin: 0 auto;
  width: 90%;
  height: 817px;
  background-color: #fff;
  padding: 30px;
  margin-top: 110px;
  box-sizing: border-box;
}
.table-content {
  margin: 0, auto;
  padding: 30px;
  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
}
.table-content::-webkit-scrollbar {
  display: none;
}
.search {
  height: 70px;
  width: 100%;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.content-footer {
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 25px;
  right: 120px;
}
</style>